<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList2-组件拆分</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <input v-model="inputValue"/>
            <button @click="handleSubmit">添加</button>
        </div>
        <div>
            <ul>
                <todo-item
                    v-for="(item, index) of list" 
                    :key="index"
                    :content="item"
                >

                </todo-item>
            </ul>
        </div>
    </div>

    <script>

        // 全局组件
        Vue.component("todo-item",{
            props: ['content'],
            template: '<li @click="handleClick">{{content}}</li>',
            methods: {
                handleClick: function(){
                    alert('clicked')
                }
            }
        })

        new Vue({
            el: "#app",
            data:{
                inputValue: "学习 Vue",
                list:[]
            },
            methods:{
                handleSubmit: function(){
                    this.list.push(this.inputValue)
                    this.inputValue=""
                }
            }

        })
    </script>
</body>
</html>